import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ExercisePage extends StatefulWidget {
  @override
  ExercisePageState createState() => new ExercisePageState();
}

class ExercisePageState extends State<ExercisePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('布局小练习'),
      ),
      body: Column(
        children: [
          _SettingItem(
              iconData: Icons.notifications,
              iconColor: Colors.blue,
              title: '消息中心',
              suffix: _NotificationsText(text: '2')),
          Divider(),
          _SettingItem(
              iconData: Icons.thumb_up,
              iconColor: Colors.green,
              title: '我赞过的',
              suffix: _Suffix(text: '121篇')),
          Divider(),
          _SettingItem(
              iconData: Icons.grade,
              iconColor: Colors.pink,
              title: '收藏集',
              suffix: _Suffix(text: '2个')),
          Divider(),
          _SettingItem(
              iconData: Icons.shopping_basket,
              iconColor: Colors.yellow,
              title: '已购小册',
              suffix: _Suffix(text: '100个')),
          Divider(),
          _SettingItem(
              iconData: Icons.account_balance_wallet,
              iconColor: Colors.blue,
              title: '我的钱包',
              suffix: _Suffix(text: '10万')),
          Divider(),
          _SettingItem(
              iconData: Icons.location_on,
              iconColor: Colors.grey,
              title: '阅读过的文章',
              suffix: _Suffix(text: '1034篇')),
          Divider(),
          _SettingItem(
              iconData: Icons.local_offer,
              iconColor: Colors.grey,
              title: '标签管理',
              suffix: _Suffix(text: '27个')),
        ],
      ),
    );
  }
}
//item
class _SettingItem extends StatelessWidget {
  const _SettingItem(
      {Key key, this.iconData, this.iconColor, this.title, this.suffix})
      : super(key: key);
  final IconData iconData;
  final Color iconColor;
  final String title;
  final Widget suffix;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 45,
      child: Row(
        children: [
          SizedBox(width: 30),
          Icon(iconData, color: iconColor),
          SizedBox(width: 30),
          Expanded(child: Text('$title')),
          suffix,
          SizedBox(width: 15)
        ],
      ),
    );
  }
}
//通知
class _NotificationsText extends StatelessWidget {
  const _NotificationsText({Key key, this.text}) : super(key: key);
  final String text;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10),
      decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.red),
      child: Text('99',style: TextStyle(color: Colors.white)),
    );
  }
}
//灰色后缀
class _Suffix extends StatelessWidget {
  const _Suffix({Key key, this.text}) : super(key: key);
  final String text;

  @override
  Widget build(BuildContext context) {
    return Text('$text', style: TextStyle(color: Colors.grey.withOpacity(0.8)));
  }
}
